<template>
  <button 
    :class="['btn', type]"
    :disabled="disabled"
    @click="$emit('click')"
  >
    <slot></slot>
  </button>
</template>

<script setup>
defineProps({
  type: {
    type: String,
    default: 'primary',
    validator: (value) => ['primary', 'secondary', 'danger'].includes(value)
  },
  disabled: {
    type: Boolean,
    default: false
  }
})

defineEmits(['click'])
</script>

<style scoped>
.btn {
  padding: 0.5rem 1rem;
  border: none;
  border-radius: 4px;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.primary {
  background-color: #42b983;
  color: white;
}

.primary:hover:not(:disabled) {
  background-color: #3aa876;
}

.secondary {
  background-color: #f1f1f1;
  color: #333;
}

.secondary:hover:not(:disabled) {
  background-color: #e0e0e0;
}

.danger {
  background-color: #e74c3c;
  color: white;
}

.danger:hover:not(:disabled) {
  background-color: #c0392b;
}
</style>